<template>
    <div class="el-col-xs-24 el-col-sm-24 el-col-md-12 el-col-md-offset-6" style="height: 100vh;position:absolute;overflow-y: auto;background-color: white;box-shadow: 6px 0 5px -5px #4F4F4F,-6px 0 5px -5px #4F4F4F;">
        <div style="height: 50px;background-color: #2F4056;">
            <div style="display:flex;align-items:center;height: 100%;margin-left: 30px;color:white;font-size:18px;font-weight: 500;position: relative;">
                <span>
                  {{form_name}}
                </span>
            </div>
        </div>
        <div style="padding: 20px 20px 30px;text-align: left">
            <el-form label-width="0">
                <div style="margin-top: 10px;margin-bottom:15px;border-radius: 4px;">
                    <!-- 表单设计 -->
                    <div v-for="item in form_design_list" style="width: 98%;margin-left: 1%;">
                        <el-form-item style="padding-bottom: 5px;margin-bottom: 10px;">
                            <!-- 该组件 存在关联条件 -->
                            <div v-if="item.isContacted">
                                <!-- 关联类型 为单选  -->
                                <div v-if="item.connection.type === 'single_choice'">
                                    <!-- 输入框 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type=== 'input_box' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder"></el-input>
                                    </div>
                                    <!-- 单项选择 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'single_choice' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-radio style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                                    </div>
                                    <!-- 多项选择 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'multiple_choice' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-checkbox style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index" v-model="multiple_choice.value" @change="multiple_change_handle(item.index,multiple_choice.display,multiple_choice.value)">{{multiple_choice.display}}</el-checkbox>
                                    </div>
                                    <!-- 下拉框 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'select' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-select style="width: 100%;margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                            <el-option v-for="select in item.data.list" :key="select.value" :label="select.label" :value="select.value"></el-option>
                                        </el-select>
                                    </div>
                                    <!-- 上传附件 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'upload' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-upload  style="margin-top: 15px;" :data="{'file_name': file_name}" class="upload-demo" v-loading="upload_loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" drag action="http://php.information1.design/api/v1/pub/uploadFormDesign/" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                            <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                                        </el-upload>
                                    </div>
                                    <!-- 日期组件 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'date_time' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-date-picker style="width: 100%;margin-top: 10px;" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                                    </div>
                                    <!-- 多行文本 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'mul_input_box' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-input style="margin-top: 10px;" type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                                    </div>
                                    <!-- 地图选点 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'map_select' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            <a @click="selectLocation(item)"><span style="font-size: 10px;color: red">(点击选择地理位置)</span></a>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                    </div>
                                    <!-- 自动定位 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'map_location' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].display">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            <a @click="autoLocation(item)"><span style="font-size: 10px;color: red">(点击获取地理位置)</span></a>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                    </div>
                                </div>
                                <!-- 关联类型 为多选  -->
                                <div v-if="item.connection.type === 'multiple_choice'">
                                    <!-- 多选 中 多选项关联 -->
                                    <div v-if="item.connection.con_side.length > 1">
                                        <!-- 输入框 多选关联处理 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type=== 'input_box' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-input style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                        <!-- 单项选择 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'single_choice' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-radio style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                                        </div>
                                        <!-- 多项选择 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'multiple_choice' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-checkbox style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index" v-model="multiple_choice.value" @change="multiple_change_handle(item.index,multiple_choice.display,multiple_choice.value)">{{multiple_choice.display}}</el-checkbox>
                                        </div>
                                        <!-- 下拉框 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'select' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-select style="width: 100%;margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                                <el-option v-for="select in item.data.list" :key="select.value" :label="select.label" :value="select.value"></el-option>
                                            </el-select>
                                        </div>
                                        <!-- 上传附件 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'upload' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-upload  style="margin-top: 15px;" :data="{'file_name': file_name}" class="upload-demo" v-loading="upload_loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" drag action="http://php.information1.design/api/v1/pub/uploadFormDesign/" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                                            </el-upload>
                                        </div>
                                        <!-- 日期组件 -->
                                        <div  v-for="con in item.connection.con_side" v-if="item.type === 'date_time' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-date-picker style="width: 100%;margin-top: 10px;" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                                        </div>
                                        <!-- 多行文本 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'mul_input_box' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-input  style="margin-top: 10px;" type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                                        </div>
                                        <!-- 地图选点 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'map_select' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                                <a @click="selectLocation(item)"><span style="font-size: 10px;color: red">(点击选择地理位置)</span></a>
                                            </div>
                                            <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                        <!-- 自动定位 -->
                                        <div v-for="con in item.connection.con_side" v-if="item.type === 'map_location' && form_design_list[con.out].data.list[con.in].display === form_design_list[con.out].mul_connection_stack[form_design_list[con.out].mul_connection_stack.length - 1]">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                                <a @click="autoLocation(item)"><span style="font-size: 10px;color: red">(点击获取地理位置)</span></a>
                                            </div>
                                            <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                    </div>
                                    <!-- 多选 中 单选项关联 -->
                                    <div v-else>
                                        <div v-if="item.type=== 'input_box' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-input style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                        <div v-if="item.type=== 'single_choice' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-radio style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                                        </div>
                                        <div v-if="item.type=== 'multiple_choice' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-checkbox style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index" v-model="multiple_choice.value" @change="multiple_change_handle(item.index,multiple_choice.display,multiple_choice.value)">{{multiple_choice.display}}</el-checkbox>
                                        </div>
                                        <div v-if="item.type=== 'select' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-select style="width: 100%;margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                                <el-option v-for="select in item.data.list" :key="select.value" :label="select.label" :value="select.value"></el-option>
                                            </el-select>
                                        </div>
                                        <div v-if="item.type=== 'upload' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-upload  style="margin-top: 15px;" :data="{'file_name': file_name}" class="upload-demo" v-loading="upload_loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" drag action="http://php.information1.design/api/v1/pub/uploadFormDesign/" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                                            </el-upload>
                                        </div>
                                        <!-- 日期组件 -->
                                        <div  v-if="item.type=== 'date_time' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-date-picker style="width: 100%;margin-top: 10px;" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                                        </div>
                                        <!-- 多行文本 -->
                                        <div v-if="item.type=== 'mul_input_box' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            </div>
                                            <el-input  style="margin-top: 10px;" type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                                        </div>
                                        <!-- 地图选点 -->
                                        <div v-if="item.type=== 'map_select' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                                <a @click="selectLocation(item)"><span style="font-size: 10px;color: red">(点击选择地理位置)</span></a>
                                            </div>
                                            <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                        <!-- 自动定位 -->
                                        <div v-if="item.type=== 'map_location' && form_design_list[item.connection.con_side[0].out].data.list[item.connection.con_side[0].in].value">
                                            <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                                <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                                <a @click="autoLocation(item)"><span style="font-size: 10px;color: red">(点击获取地理位置)</span></a>
                                            </div>
                                            <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                        </div>
                                    </div>
                                </div>
                                <!-- 关联类型 为下拉框  -->
                                <div v-if="item.connection.type === 'select'">
                                    <!-- 输入框 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type=== 'input_box' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                    </div>
                                    <!-- 单项选择 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'single_choice' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-radio style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                                    </div>
                                    <!-- 多项选择 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'multiple_choice' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-checkbox style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index" v-model="multiple_choice.value" @change="multiple_change_handle(item.index,multiple_choice.display,multiple_choice.value)">{{multiple_choice.display}}</el-checkbox>
                                    </div>
                                    <!-- 下拉框 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'select' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-select style="width: 100%;margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                            <el-option v-for="select in item.data.list" :key="select.value" :label="select.label" :value="select.value"></el-option>
                                        </el-select>
                                    </div>
                                    <!-- 上传附件 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'upload' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-upload  style="margin-top: 15px;" :data="{'file_name': file_name}" class="upload-demo" v-loading="upload_loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" drag action="http://php.information1.design/api/v1/pub/uploadFormDesign/" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                            <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                                        </el-upload>
                                    </div>
                                    <!-- 日期组件 -->
                                    <div   v-for="con in item.connection.con_side" v-if="item.type === 'date_time' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-date-picker style="width: 100%;margin-top: 10px;" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                                    </div>
                                    <!-- 多行文本 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'mul_input_box' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        </div>
                                        <el-input  style="margin-top: 10px;" type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                                    </div>
                                    <!-- 地图选点 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'map_select' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            <a @click="selectLocation(item)"><span style="font-size: 10px;color: red">(点击选择地理位置)</span></a>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                    </div>
                                    <!-- 自动定位 -->
                                    <div v-for="con in item.connection.con_side" v-if="item.type === 'map_location' && form_design_list[con.out].value === form_design_list[con.out].data.list[con.in].value">
                                        <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                            <a @click="autoLocation(item)"><span style="font-size: 10px;color: red">(点击获取地理位置)</span></a>
                                        </div>
                                        <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                    </div>
                                </div>
                            </div>
                            <!-- 该组件 无关联条件 -->
                            <div v-if="!item.isContacted">
                                <!-- 输入框 -->
                                <div v-if="item.type=== 'input_box'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-input style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                </div>
                                <!-- 单项选择 -->
                                <div v-if="item.type === 'single_choice'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-radio style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                                </div>
                                <!-- 多项选择 -->
                                <div v-if="item.type === 'multiple_choice'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-checkbox  style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index" v-model="multiple_choice.value" @change="multiple_change_handle(item.index,multiple_choice.display,multiple_choice.value)">{{multiple_choice.display}}</el-checkbox>
                                </div>
                                <!-- 下拉框 -->
                                <div v-if="item.type === 'select'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-select style="width: 100%;margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                        <el-option v-for="select in item.data.list" :key="select.value" :label="select.label" :value="select.value"></el-option>
                                    </el-select>
                                </div>
                                <!-- 上传附件 存在上传文件名bug 待处理 -->
                                <div v-if="item.type === 'upload'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-upload  style="margin-top: 15px;" :data="{'file_name': file_name}" class="upload-demo" v-loading="upload_loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" drag action="http://php.information1.design/api/v1/pub/uploadFormDesign/" multiple :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                                    </el-upload>
                                </div>
                                <!-- 日期组件 -->
                                <div v-if="item.type === 'date_time'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-date-picker style="width: 100%;margin-top: 10px;" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                                </div>
                                <!-- 多行文本 -->
                                <div v-if="item.type === 'mul_input_box'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                    </div>
                                    <el-input  style="margin-top: 10px;" type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                                </div>
                                <!-- 地图选点 -->
                                <div v-if="item.type === 'map_select'">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        <a @click="selectLocation(item)"><span style="font-size: 10px;color: red">(点击选择地理位置)</span></a>
                                    </div>
                                    <el-input  style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                </div>
                                <!-- 自动定位 -->
                                <div v-if="item.type === 'map_location'" :id="item.index">
                                    <div style="height: 20px;margin-bottom: 5px;margin-top:10px;position: relative;">
                                        <span style="font-size: 12px;margin-left: 1%;font-weight: bold;"><span v-if="item.item_required" style="color: red;margin-right: 5px;">*</span>{{item.data.title}}</span>
                                        <a @click="autoLocation(item)"><span :id="item.index + 'map_click'" style="font-size: 10px;color: red">(点击获取地理位置)</span></a>
                                    </div>
                                    <el-input style="margin-top: 10px;" v-model="item.value" :placeholder="item.data.placeholder" ></el-input>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <el-form-item style="margin-top: 10px;">
                        <span style="margin-left:5px;font-size: 10px;color: #666666">标有<span style="color: red;margin-left: 3px;margin-right: 3px;">*</span>的是必填项</span>
                        <el-button  style="width: 100%;background-color: #2F4056;color: white">提交</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    /**
     * 一、
     *  级联关联问题
     *  （1）a b
     *  （2）a b
     *  （3）a b
     *  关联条件 ： (1)的a选中，二显示
     *              (2)的a选中，三显示
     *  注   ：  此时需注意 用户将（1）中选项由a改b时，代码需联动将（2）中的a 改 b 或将 value置空 以达到将三消失的目的
     * 二、
     *  多选 多选项关联问题（单选和下拉框不存在这个问题）  已解决
     *  （1）输入框
     *  （2）多选 a b
     *  关联条件  ：  （2）中a选中，b选中，都将（1）显示
     *  注   ：   此时需注意 用户选a时（1）显示，用户选b时，（1）不能再显示，易导致（1）出现两个输入框
     *  通过在多选组件 维护一个栈的数据结构 以达到在this_index 组件的 v-if 中将 多选 变 单选 解决这个问题
     */
    import axios from "axios";
    export default {
        name: "Form_display",
        data(){
            return{
              /** 表单数据在 mongodb 中的id */
              form_id: '',
              /** 问卷名称 */
              form_name: '表单',
              /** 表单数据 */
              form_design_list: [],
              /** 表单 填写 数据 */
              form_data: [],
              /** 上传附件的 文件名 */
              file_name: '',
              /** 上传 加载 */
              upload_loading: false,
              /** 腾讯位置服务 */
              location_backurl: '',
              geolocation : new qq.maps.Geolocation("SERBZ-RV23D-XCF4W-PQV4N-Q4G76-QVBP2", "form-design"),
              positionNum : 0,
              options : {
                timeout: 8000
              }
            }
        },
        methods:{
            /**
             * @return {boolean}
             */
            GetQueryString : function (name) {
                const reg = eval("/" + name + "/g");
                const r = window.location.hash.substr(1);
                const flag = reg.test(r);
                if(flag){
                    return true;
                }else{
                    return false;
                }
            },
            getQuery: function (name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            },
            /** 上传附件组件 上传成功回调 */
            handleAvatarSuccess(res, file) {
                this.upload_loading = false;
            },
            /** 上传附件组件 上传之前回调 */
            beforeAvatarUpload(file) {
                this.upload_loading = true;
                this.file_name = file.name;
            },
            /** 关联处理 */
            connection_handle: function () {
                for (let i = 0; i < this.form_design_list.length; i++) {
                    if (this.form_design_list[i].isContacted) {
                        this.form_design_list[i].connection.con_side = [];
                        for (let j = 0; j < this.form_design_list[i].connection.inside_index.length; j++) {
                            if (this.form_design_list[i].connection.inside_index[j].connection_value) {
                                let con = {
                                    out: this.form_design_list[i].connection.out_side,
                                    in: j
                                };
                                /** 关联 下标 out in */
                                this.form_design_list[i].connection.con_side.push(con);
                            }
                        }
                        /** 处理多选关联问题 */
                        /** 已知con_side的长度 判断是否为 多选 关联类型 如果是多选 如果con_side长度大于1 */
                        if (this.form_design_list[i].connection.type === 'multiple_choice' && this.form_design_list[i].connection.con_side.length > 1) {/** 此处有bug需处理 con_side长度大于1 和等于1时，分别做处理*/
                            /** 多选关联处理 将多选 以栈的方式 按单选处理 */
                            /** 创建栈 数据结构 */
                            this.form_design_list[this.form_design_list[i].connection.con_side[0].out].mul_connection_stack = [];
                            /** 多选组件 存在 mul_connection_stack 则为 多选中 多选项 关联情况，不存在则是多选中 单选项关联情况 在 multiple_change_handle() 中判断  */
                        }
                    }
                }
            },
            /** 处理多选关联问题 */
            /** 多选 当绑定值变化时触发的钩子 index 该组件下标 display改组件选项display  value 该组件该选项是否选中（bool类型） */
            multiple_change_handle: function (index, display, value) {
                console.log(index, display, value);
                /** 判断该多选组件 是否存在 mul_connection_stack[] */
                if (this.form_design_list[index].hasOwnProperty('mul_connection_stack')){
                    if (value) {
                        /** 入栈 */
                        this.form_design_list[index].mul_connection_stack.push(display);
                    } else {
                        /** 删除 元素 */
                        const i = this.form_design_list[index].mul_connection_stack.indexOf(display);
                        if (i > -1) {
                            this.form_design_list[index].mul_connection_stack.splice(i, 1);
                        }
                    }
                    /** 将多选关联的 this_index 组件 v-if = 'this.form_design_list[out].mul_connection_stack[length - 1] === this.form_design_list[out].data.list[in].display ' 即可*/
                }
            },
            /** 必填处理 */
            form_required: function(){
                let count = 0;
                for(let index=0;index<this.form_design_list.length;index++){
                    if (this.form_design_list[index].item_required){
                        switch (this.form_design_list[index].type) {
                            case 'input_box':case 'single_choice':case 'select':case 'date_time':case 'mul_input_box':case 'map_select':case 'map_location':
                                if (this.form_design_list[index].value === '') count++;
                                break;
                            case 'upload':
                                if (this.form_design_list[index].value.length === 0)  count++;
                                break;
                            case 'multiple_choice':
                                let is = false;
                                for (let i = 0; i < this.form_design_list[index].data.list.length; i++) {
                                    if (this.form_design_list[index].data.list[i].value)  is = true;
                                }
                                if (is) { count++; }
                                break;
                        }
                    }
                }
                return count;
            },
            /** 地图选点 */
            selectLocation: function (item) {
                this.$cookies.set("location_index",item.index);
                window.location.href="https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=" + this.location_backurl + "&key=SERBZ-RV23D-XCF4W-PQV4N-Q4G76-QVBP2&referer=form-design"
            },
            /** 自动定位 */
            autoLocation: function (item) {
                this.geolocation
                    .getLocation(function (position) {
                        this.positionNum ++;
                        item.value = position.province + position.city + position.addr + ",["+ position.lat + "," + position.lng +"]";
                    }, function () {
                        this.positionNum ++;
                        item.value = "定位失败！";
                    }, this.options)
            },
            /** 提交按钮 */
            submit(){
                /** 必填处理 */
                const count = this.form_required();
                if (count === 0){
                    /** 提取表单填写数据 提交数据库 */
                    this.form_data = [];
                    for(let i=0;i<this.form_design_list.length;i++){
                        switch (this.form_design_list[i].type) {
                            case 'input_box':case 'single_choice':case 'select':case 'date_time':case 'mul_input_box':case 'map_select':case 'map_location':case 'upload':
                                this.form_data.push(this.form_design_list[i].value);
                                break;
                            case 'multiple_choice':
                                let is = [];
                                for (let j = 0; j < this.form_design_list[i].data.list.length; j++) {
                                    if (this.form_design_list[i].data.list[j].value) is.push(this.form_design_list[i].data.list[j].display);
                                }
                                this.form_data.push(is);
                                break;
                        }
                    }
                    const data = {
                      value : this.form_data
                    }
                } else {
                    this.message("还有"+ count +"项必选项没有填写，填写后再提交","error");
                }
            },
            /** url编码 */
            url_encode: function (str) {
                str = (str + '').toString();
                return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
            },
            /** 消息提示 */
            message: function(message,type){
                this.$message({
                    message: message,
                    type: type
                });
            },

        },
        created: function () {
          this.form_id = this.$route.params.id;
          axios.get("http://49.232.95.128:10007/form/get?id=" + this.form_id
          ).then((response) => {
            if (response.data.code === 0){
              this.form_name = response.data.data.form_title;
              this.form_design_list = response.data.data.form_data.form_design_list;
              /** 表单关联处理 */
              this.connection_handle();
              /** 地图选点处理 */
              if (this.GetQueryString("city") && this.GetQueryString("addr") && this.GetQueryString("latng")) {
                this.form_design_list[this.$cookies.get("location_index")].value = this.getQuery("city") + this.getQuery("addr") + ",[" +this.getQuery("latng") + "]";
                /** 去掉路由参数 */
                this.$router.push({ query: {} });
              }
            }
          }).catch((error) => {
            console.log(error);
          });
        },
        mounted: function () {
        }
    }
</script>

<style scoped>
    /** 上传附件组件 */
    .upload-demo >>> .el-upload{ width: 100%;height: 40px; }
    .upload-demo >>> .el-upload-dragger{ width: 100%;height: 40px;border-radius: 1px; }
</style>
